<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>商品信息详细页</title>
        <style type="text/css">
            /*公共样式*/
            /*此网页是在课件基础上做了些许改动*/
            body,div,span,a,h1,h2,h3,h4,h5,h6,ul,li,ol,table,tr,td,th,p,img{margin:0px;padding:0px}
            ul{list-style: none;}
            .clear{clear:both;width:100%;height:5px;}
            #container{width:1200px;margin:0px auto;}
            #header{width:100%;height:100px;background-color:#ddd;}

            #nav{width:100%;height:50px;margin-top:5px;background:url("./images/repeat.png") repeat-x 0px 0px; }
            #nav ul li{width:100px;float:left;line-height:50px; margin-left:60px;}
            #nav ul li a{
                color:#fff;
                text-decoration: none;
                line-height: 50px;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                width:100px;
                height:50px;
                display: block;
            }
            #nav ul li a:hover{color:blue;background-color:#fff;}            

            #main{width:100%;}

            #article{width:392px;height:850px;float:right;background-color:#ffb6c1;}
            #aside{width:800px;height:850px;float:left;background-color:#fafad2;}
            #footer{width:100%;height:70px;margin-top:5px;background-color:#8fbc8f; }

            /*#bigpicture{width:550px;height:550px;float:left;width: 90%;height: 90% }*/

            div.NameOfGood{
                font-weight: bold;
                font-size:30px;
                font-family: "微软雅黑";
            }

            div.TheInfomation{
                font-size:18px;
                font-family: "宋体";
            }

            div.ThePrice{
                font-size:50px;
                font-family: "宋体";
                color: brown;
                position: relative;
                top: 30px;
                left: 100px;
            }

             div.TheHiddenPrice{
                font-size:8px;
                font-family: "宋体";
                color: rgb(255,182,193);
                position: relative;
                top: 10px;
                left: 250px;
            }

            div.Parameters ul li{
                font-size:26px;
                font-family: "宋体";
                position: relative;
                top: 60px;                
            }

            div.buybuybuy ul li{
                margin-top: 20px;
                margin-left:30px;
                font-size:20px;
                font-family: "宋体";
                float: left;
                position: relative;
                top: 100px;           
            }

            div.EndOfPage{
                font-size:26px;
                position: relative;
                top: 15px;  
                left: 530px;       
            }
        </style>
    </head>
    <body>
        <div id="container">
            <!-- 页头开始 -->
            <header id="header">
            	<img src="./images/1200100.png" title="logo"  />
            </header>
            <!-- 页头结束 -->

            <!-- 导航开始-->
            <nav id="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">买买买</a></li>
                    <li><a href="#">卖卖卖</a></li>
                    <li><a href="#">我要开店</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">特贵金融</a></li>
                </ul>
            </nav>
            <!-- 导航结束-->
            <div class="clear"></div>
            <!-- 开始编写商品界面-->
            <div id="main">
				<!-- 商品图片处理中-->
 				<aside id="aside" >
                    <div id="bigpicture">
                	<iframe name="myframe" src="./images/mate20pro.png" title="商品图片" width="800" height="800" >   
                    </iframe>
                    </div>         
                </aside>
                <!-- 商品图片插入结束-->
                    
                <!--
                <iframe name="myframe" src=""./images/mate20pro.png"" title="商品图片" width="600" height="600" ></iframe>
                <div id="bigpicture">
                    <img src="./images/mate20pro.png" title="商品图片" width="600" height="600" />
                    </div>  

                -->

                <!-- 商品说明处理中-->
                <article id="article">

                	<!--加入商品名称-->
                	<div class="NameOfGood">
                		<p>
                		HUAWEI Mate 20 Pro 6GB+128GB 全网通版
                		</p>	
                	</div>
					
  				 	<!--加入商品说明-->
                	<div class="TheInfomation">
                		<p>
                		HUAWEI Mate 20系列 智慧新高度。华为 | 徕卡 联合设计，麒麟980旗舰芯片，超大广角徕卡三摄。HUAWEI Kirin 980 （麒麟980）6.39英寸 前置单摄： 支持3D 深度感知相机 2400万像素，f/2.0光圈，支持固定焦距。 *前置摄像头采用2480万像素CMOS传感器（理论值），有效像素2400万（理论值）。后置徕卡三摄： 4000万像素（广角，f/1.8光圈）+2000万像素（超广角，f/2.2光圈）+800万像素（长焦，f/2.4光圈），支持自动对焦（激光对焦/相位对焦/反差对焦），支持AIS防抖。 备注：不同拍照模式的照片像素可能有差异，请以实际为准。
                		</p>	
                	</div>

                    <!--加入价格-->
                    <div class="ThePrice">
                        <p><em> ¥ </em>5399</p>
                    </div>
                    <div class="TheHiddenPrice">
                        <p>以及额外服务费</p>
                    </div>

                    <!--加入商品选项-->
                    <div class="Parameters">
                        <ul>
                            <li>
                                <div>    
                                    <a href="./images/亮黑色800.png" target="myframe">亮黑色<img src="./images/smallimg1.png"></a>
                                </div>   
                            </li>
                            <li>
                                <div>
                                    <a href="./images/宝石蓝800.png" target="myframe">宝石蓝<img src="./images/smallimg2.png"></a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="./images/樱粉金800.png" target="myframe">樱粉金<img src="./images/smallimg3.png"></a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="./images/翡冷翠800.png" target="myframe">翡冷翠<img src="./images/smallimg4.png"></a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="./images/极光色800.png" target="myframe">极光色<img src="./images/smallimg5.png"></a>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!--加入购买选项-->
                    <div class="buybuybuy">
                        <ul>
                            <li><a href="#">立刻购买</a></li>
                            <li><a href="#">加入购物车</a></li>
                            <li><a href="#">查看推荐</a></li>
                            <li><a href="#">买不起？点我</a></li>
                        </ul>  
                    </div>
                    <!--尝试加入无关信息

                    <div class="GaoLiDai">
                        <p>
                            点击体验低额高利息贷款
                        </p>
                    </div>
                    -->
                </article>
                
            </div>
            <div class="clear"></div>
            <footer id="footer">
                <!--加入回到页首功能-->
                <div class="EndOfPage">
                    <p>
                        <a href="">回到页首</a>
                    </p>
                </div>
            </footer>
        </div>
    </body>
</html>